<template>
  <div class="Content" :class="{ chang: $parent.quanwidth }">
    <div style="position: relative;">
      <h5 style="position: absolute;top: 15px;">
        <img src="../assets/images/images/zuoheng_03.png" alt="" style="float: left;margin-right: 6px;">
        {{$route.query.name}}
      </h5>
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import CustomPagination from '@/assets/js/custom-pagination.min.js';
import list from '@/html/list';
import shipan from '@/html/shipan';
import index from '@/html/index';
export default {
  name: 'Content',
  props: [],
  data() {
    return {
      comName: this.$route.query.comName,
    };
  },
  created() {
    console.log(this.$route.query)
    window.CustomPagination = CustomPagination;
    if (this.$route.query.name) {
      var type = false;
      for (var i in this.$root.router) {
        var o = this.$root.router[i];
        if (this.$route.query.name == o.name) {
          type = true;
          break;
        }
      }
      if (!type) {
        this.$root.router.push({
          comName: this.comName,
          type: true,
          name: this.$route.query.name,
          url: this.$route.path
        });
      }
    } else {
      this.$router.push({
        path: '/',
        query: {
          name: '欢迎界面',
          comName: 'index'
        }
      });
    }
  },
  methods: {},
  components: {
    list,
    index,
    shipan
  },
  computed: {},
  mounted() {},
  watch: {
    $route(to, form) {
      // console.log(to,form)
      var num  = 0;
      this.comName = this.$route.query.comName;
      var name = this.$route.query.name;
      var isor = false;
      for (var i in this.$root.router) {
        var o = this.$root.router[i];
        if (o.name == name) {
          o.type = true;
          num = i;
          isor = true;
          // break;
        } else {
          o.type = false;
        }
      }
      if (!isor) {
        this.$root.router.push({
          comName: this.comName,
          type: true,
          name: this.$route.query.name,
          url: to.path
        });
        num = this.$root.router.length - 1;
      }
      this.$root.setcss(num);
    }
  }
};
</script>
<style>
 @import '../assets/css/custom-pagination.css';
.Content {
  height: calc(100% - 120px);
  box-sizing: content-box;
  position: fixed;
  z-index: 1;
  width: calc(100% - 90px);
  transition: all 0.3s ease;
  right: 0;
  top: 120px;
  font-size: 16px;
  overflow: auto;
}
.Content > * {
  padding: 15px;
}
.Content >div>h5~div{
  margin-top: 30px;
}
.Content.chang {
  width: calc(100% - 200px);
}
</style>
